<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>贪吃蛇</title>
    <style>
        .div1{width:800px;height:600px;background-color: #ccc;position: relative;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <script>
        // 产生随机数的对象
      (function(win){
        function Random(){};
        Random.prototype.getRandom=function(min,max){
            return Math.floor(Math.random()*(max-min)+min);
        };
        win.Random=new Random();

      })(window);  
    //   console.log(Random.getRandom(9,19));

      (function(window){
        var div1 = document.querySelector('.div1');
        function Food (width,height,color){
            this.width=width||20;
            this.height=height||20;
            this.color=color;
            this.x=0;this.y=0;
            this.element=document.createElement('div');

        }
        Food.prototype.init=function(div1){
            var div=this.element;
            div.style.position='absolute';
            div.style.width=this.width+"px";
            div.style.height=this.height+"px";
            div.style.backgroundColor=this.color;
            div1.appendChild(div);
            this.render(div1);
        }
        Food.prototype.render=function(div1){
            var x=Random.getRandom(0,div1.offsetWidth/this.width)*this.width;
            var y=Random.getRandom(0,div1.offsetHeight/this.height)*this.height;
            this.x=x;this.y=y;
            var div=this.element;
            div.style.left=this.x+"px";
            div.style.top=this.y+"px";
                    }
                    var fd=new Food(20,20,"green");
                    fd.init(div1);
        })(window);

    </script>
</body>
</html>